<template>
    <div class="person">
		<!-- 头部 -->
		<div class="header">
			<div class="header-logo">
				<image :src="userInfo.user_info.photo_url||defaultLogo"  mode="aspectFill"></image>
			</div>
			<div class="header-content" v-if="userInfo.user_info">
				<div class="header-content-name">{{userInfo.user_info.nickname}}</div>
				<div class="header-content-desc">{{userInfo.user_info.signature}}</div>
				<div class="header-content-tag" >
					<div class="header-content-tag-item"  @click="toFollow">
						<span>关注</span>
						<span>{{userInfo.user_follow_num}}</span>
					</div>
					<div class="header-content-tag-item"  @click="toFans">
						<span>粉丝</span>
						<span>{{userInfo.wasFollowNum}}</span>
					</div>
					<div class="header-content-tag-item" >
						<span>获赞</span>
						<span>{{userInfo.goodNumber}}</span>
					</div>
				</div>
				
			</div>
			<!--<div v-else class="login" @click="toLogin">授权登录</div>-->
			<button  v-else class="login" open-type="getUserInfo" @getuserinfo="bindGetUserInfo">点击登录</button>
			<div class="header-right" @click="toPersonHomePage">个人主页</div>
		</div>
		<!-- 头部end -->
		
		<!-- tabar -->
		<div class="tabbar-wrapper">
			<div class="tabbar-item" v-for="(item,index) of tabBarData" :key="index" @click="toUrl(item.url)">
				<div class="tabbar-item-name">{{item.name}}</div>
				<div class="tabbar-item-desc">{{item.desc}}</div>
			</div>
		</div>
		<!-- tabbar end -->
		
		<!-- 轮播 -->
		<!-- <swiper class="banner-swiper"  interval="2000" duration="1500"	>
		    <swiper-item v-for="(item,index) of bannerList" :key="index">
		        <image :src="item.img_url"  mode="aspectFill"  @click="toActivity(item)"/>
		    </swiper-item>

		</swiper> -->
		<!-- 轮播end -->
		<div class="intergal-wrapper">
			<div class="intergal-now">当前积分 <span>{{userInfo.user_info.integral}}</span></div>
			<div class="intergal-btn">
				<div class="history">历史总积分 <span>{{userInfo.user_info.history_total_integral}}</span></div>
				<div class="btn" @click="toShop">赚积分</div>
			</div> 
		</div>
		
		<div class="cell-list">
			<div class="cell" @click="toPostHistory">
				<div class="cell-icon">
					<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/homeHistory.png"></image>
				</div>
				<div class="cell-name">浏览历史</div>
			</div>
			<!--<div class="cell" @click="cantShow">-->
				<!--<div class="cell-icon">-->
					<!--<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/homePrize.png"></image>-->
				<!--</div>-->
				<!--<div class="cell-name">我的抽奖</div>-->
			<!--</div>-->
			<!--<div class="cell" @click="cantShow">-->
				<!--<div class="cell-icon">-->
					<!--<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/homeActivity.png"></image>-->
				<!--</div>-->
				<!--<div class="cell-name">我的活动</div>-->
			<!--</div>-->
			<!--<div class="cell" @click="cantShow">-->
				<!--<div class="cell-icon">-->
					<!--<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/homeGame.png"></image>-->
				<!--</div>-->
				<!--<div class="cell-name">我的游戏</div>-->
			<!--</div>-->
			<div class="cell" @click="toAddress">
				<div class="cell-icon">
					<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/homeAddress.png"></image>
				</div>
				<div class="cell-name">收货地址</div>
			</div>
			<!--<div class="cell" @click="cantShow">-->
				<!--<div class="cell-icon">-->
					<!--<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/homeHouse.png"></image>-->
				<!--</div>-->
				<!--<div class="cell-name">小黑屋</div>-->
			<!--</div>-->
			<div class="cell" @click="toSuggestions">
				<div class="cell-icon">
					<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/suggestion.png"></image>
				</div>
				<div class="cell-name">意见反馈</div>
			</div>
			<!--<div class="cell" @click="cantShow">-->
				<!--<div class="cell-icon">-->
					<!--<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/homeSetting.png"></image>-->
				<!--</div>-->
				<!--<div class="cell-name">设置</div>-->
			<!--</div>-->
<!--			<div class="cell" @click="toCircleManager" v-if="managerCircleId.length!=0">-->
<!--				<div class="cell-icon">-->
<!--					<image :src="defaultJpg"></image>-->
<!--				</div>-->
<!--				<div class="cell-name">圈子管理</div>-->
<!--			</div>-->
			
			<!-- <div class="cell" @click="toRegister">
				<div class="cell-icon">
					<image style="width: 46rpx;height: 46rpx;margin: 5rpx;" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/homePhone.png"></image>
				</div>
				<div class="cell-name">绑定手机</div>
			</div> -->
		</div>
		
		<!-- 更多功能 -->
		<!-- <div class="more-wrapper">
			<div class="more-tit">更多功能</div>
			<div class="more-item-wrapper">
				<div></div>
			</div>
		</div> -->
		<!-- 更多功能 -->
		<navBar></navBar>
		<registerPhone ref="registerPhone"/>
    </div>
</template>

<script>
    import navBar from '@/pages/components/navBar/index.vue';
	import registerPhone from '@/pages/components/registerPhone/registerPhone.vue'
	let defaultJpg=require('../../static/img/quan-active.png');
	let defaultBanner=require('../../static/img/123.jpg')
    export default {
        name: "person",
		data(){
			return {
				userInfo:{},
				defaultBanner:defaultBanner,
				defaultJpg:defaultJpg,
				defaultLogo:'https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/personDefault.png',
				bannerList:[],
				headerTag:[
					{name:'关注',num:1,url:"/pages/notice/fansPeople/fansPeople"},
					{name:'粉丝',num:1,url:"/pages/notice/followPeople/followPeople"},
					{name:'获赞',num:1},
					],//头部关注等数据
				tabBarData:[
					{name:'帖子',desc:'我发布的',url:'/pages/person/personHomepage/personHomepage'},
					{name:'评论',desc:'我发出的',url:'/pages/person/myComment/myComment'},
					{name:'收藏',desc:'我的最爱',url:'/pages/person/collection/collection'},
					],
				managerCircleId:[]//我管理的数组
			}
		},
        components:{
            navBar,
			registerPhone
        },
		methods:{
			cantShow(){
				uni.showToast({
					title:'该功能暂未开放',
					icon:'none'
				})
			},
			toShop(){
				//跳转积分页
				uni.navigateTo({
					url:'/pages/shop/shop'
				})
			},
			toLogin(){
				//跳转登录
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			toRegister(){
				//跳转绑定手机
				uni.navigateTo({
					url:'/pages/login/register/register'
				})
			},
			toFollow(){
				//跳转关注
				uni.navigateTo({
					url:'/pages/notice/followPeople/followPeople'
				})
			},
			toFans(){
				//跳转粉丝
				uni.navigateTo({
					url:'/pages/notice/fansPeople/fansPeople'
				})
			},
			toPersonHomePage(){
				//跳转个人主页
				uni.navigateTo({
					url:'/pages/person/customHomepage/customHomepage'
				})
				
			},
			toPostHistory(){
				//跳转浏览历史
				uni.navigateTo({
					url:'/pages/person/postHistory/postHistory'
				})
			},
			toAddress(){
				uni.navigateTo({
					url:'/pages/shop/selectAddress/selectAddress?form=person'
				})
			},
			toCircleManager(){
				//跳转圈子管理
				// uni.navigateTo({
				// 	url:"/pages/person/managerCircle/managerCircle" 
				// })
				uni.navigateTo({
				    url: '/pages/person/managerCircle/managerCircleItem/managerCircleItem?circle_id='+this.managerCircleId[0]
				})
			},
			toSuggestions(){
				//跳转反馈信息
				uni.navigateTo({
					url:'/pages/person/suggestions/suggestions'
				})
			},
			toUrl(url){
				uni.navigateTo({
					url:url
				})
			},
			async getMyAdminCircle(){
				//获取管理的圈子id
				let params={
					user_token:uni.getStorageSync('userToken')
				}
				let res=await this.$api.getMyAdminCircle(params);
				if(res.data.level=='success'){
					this.managerCircleId=res.data.data
				}
			},
			toActivity(val){
				//banner跳转
				const url=val.link_url
				url=encodeURIComponent(url)
				let pattern=/^\/pages/
				if(pattern.exec(url)){
				  this.$currency.navigateTo(url)
				}else{
				  uni.navigateTo({url:'/pages/index/webview/webview?url='+url})
				}
			},
			async getUserInfo(){
				//获取用户信息
				let userToken=uni.getStorageSync('userToken')
				let res=await this.$api.getUserInfo({user_token:userToken});
				if(res.data.level=='success'){
					this.userInfo=res.data.data
					uni.setStorageSync("userId",res.data.data.id)
				}
			},
			async getBannerList(){
				//获取banner
				let params={
					user_token:uni.getStorageSync('userToken'),
					type:'user'
				}
				let res=await this.$api.getBannerList(params)
				this.bannerList=res.data.data
			},

			//授权登录
			async bindGetUserInfo(e){
				var _this=this;
				uni.login({
					success : res =>{
						let code=res.code;
						uni.getUserInfo({
							success:async(res) =>{
								let params={}
								
								params={raw_data:res.rawData,signature:res.signature,code:code};
								if(this.$bus.$data.inviteId){
									//邀请用户的id
									params.user_id=this.$bus.$data.inviteId
								}
								let res1=await this.$api.wxAppLogin(params)
								if(res1.data.level=="success")
								{
									uni.setStorageSync('userToken',res1.data.data);
									_this.getUserInfo();
									if(res1.data.action=='home')
									{
										// uni.switchTab({
										//   url:"/pages/index/index"
										// })
										
										_this.toLastPage()
									}else{
										// uni.navigateTo({
										// 	url:'/pages/login/register/register'
										// })
										_this.$refs.registerPhone.$data.open_id =res1.data.open_id 
										_this.$refs.registerPhone.$data.show=true
									}
									// _this.toLastPage()
								}else{
									
								}

							}

						})
					}
				})


			},
			toHome(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
			toLastPage(){
				//返回授权前的页面
				let pageInfo=this.$bus.$data.historyUrl
				if(
				pageInfo.path!=='pages/index/index'&&
				pageInfo.path!== 'pages/circlebar/circlebar' &&
				pageInfo.path!== 'pages/notice/notice' &&
				pageInfo.path!== 'pages/person/person'
				){
					
					let options=null
					if(pageInfo.options){
						options=this.$currency.toQueryString(pageInfo.options)
					}
					uni.redirectTo({
						url: `/${pageInfo.path}?${options}`
					});
				}else{
					// uni.switchTab({
					// 	url:`/${pageInfo.path}`
					// })
				}
				
			},
		},
        onLoad(options){
			uni.hideTabBar()
			this.getBannerList()
            // getApp().globalData.navBarIndex=4;
        },
		onShow(){
			this.getUserInfo();
			this.getMyAdminCircle()
		}
    }
</script>

<style scoped lang="scss">
	//头部
	@import '~@/static/scss/mixin.scss';
	.person{
		padding-bottom: 100rpx;
		//头部
		.header{
			@include flex(space-between,center);
			padding:10rpx 0 10rpx 30rpx;
			margin-top:40rpx;
			margin-bottom: 30rpx;
			.header-logo{
				image{
					width:120rpx;
					height: 120rpx;
					border-radius: 50%;
				}
			}
			.login{
				flex:1;
				text-align: left;
				background: #fff;
				/*margin-left:20rpx;*/

			}
			.login::after {
				border: none;
			}
			.header-content{
				margin:0 20rpx;
				flex:1;
				.header-content-name{
					font-weight: bold;
					
				}
				.header-content-desc{
					color:gray;
					margin:20rpx 0;
					font-size: 24rpx;
				}
				.header-content-tag{
					@include flex(space-between,center);
					width: 80%;
					font-size: 24rpx;
					.header-content-tag-item{
						font-size: 28rpx;
						span:last-of-type{
							margin-left: 10rpx;
						}
					}
				}
			}
			.header-right{
				font-size: 25rpx;
				padding:10rpx;
				box-shadow:0px 3px 7px 0px rgba(0,0,0,0.03);
				border-radius:32rpx 0px 0px 32rpx;
				white-space: nowrap;
				border:2rpx solid rgba(241,241,241,1);
			}
		}
		
		//tabbar
		.tabbar-wrapper{
			margin: 40rpx 20rpx 0 20rpx;
			@include  flex(space-around,center);
			.tabbar-item{
				&:nth-child(1){
					background-image: url('https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/myPost.png');
					background-size:112rpx 112rpx ;
					background-repeat: no-repeat;
					background-position:right bottom ;
					position: relative;
					&:after{
						content:'';
						width:4rpx;
						height: 28rpx;
						background:#FF3C4E;
						position: absolute;
						left:0;
						top:20rpx;
					}
				}
				&:nth-child(2){
					background-image: url('https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/myComment.png');
					background-size:112rpx 112rpx ;
					background-repeat: no-repeat;
					background-position:right bottom ;
					position: relative;
					&:after{
						content:'';
						width:4rpx;
						height: 28rpx;
						background:#1A8BFF;
						position: absolute;
						left:0;
						top:20rpx;
					}
				}
				&:nth-child(3){
					background-image: url('https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/myCollect.png');
					background-size:112rpx 112rpx ;
					background-repeat: no-repeat;
					background-position:right bottom ;
					position: relative;
					&:after{
						content:'';
						width:4rpx;
						height: 28rpx;
						background:#FFCF45;
						position: absolute;
						left:0;
						top:20rpx;
					}
				}
				flex:1;
				margin:10rpx;
				border-radius: 10rpx;
				box-shadow: 2rpx 2rpx 2rpx 5rpx #eee;
				line-height: 40rpx;
				padding:10rpx;
				.tabbar-item-name{
					font-size: 28rpx;
					font-weight: bolder;
				}
				.tabbar-item-desc{
					font-size: 20rpx;
					color:gray;
				}
			}
		}
		
		//轮播
		.banner-swiper{
			margin:30rpx 20rpx;
			height: 150rpx;
			swiper-item{
				width: auto;
				@include flex();
				padding:0 20rpx;
				width: 90vw;
				box-sizing: border-box;
				image{
					border-radius: 10rpx;
					width: 100%;
					height: 100%;
				}
			}

		}
		
		//积分
		.intergal-wrapper{
			background:#FFE226;
			box-shadow:0px 2px 14px 0px rgba(255,226,38,0.34);
			border-radius:28px;
			margin:40rpx 20rpx 20rpx 20rpx;
			padding:20rpx;
			border-radius:20rpx;
			@include flex(space-between);
			.intergal-now{
				font-size: 28rpx;
				margin:20rpx 0;
				font-weight: 600;
				line-height: 40rpx;
				span{
					font-weight: 600;
					font-size: 40rpx;
					line-height: 40rpx;
					margin-left: 20rpx;
				}
			}
			.intergal-btn{
				font-size: 24rpx;
				@include flex();
				.history{
					span{
						margin-left: 10rpx;
					}
				}
				.btn{
					background: #292929;
					background:rgba(41,41,41,1);
					border-radius:30rpx;
					padding:10rpx 20rpx;
					margin-left:20rpx;
					color:#FFE226;
				}
			}
		}
		
		//功能列
		.cell-list{
			width: 100%;
			@include flexWrap(flex-start);
			.cell{
				width:25%;
				margin:10px 0;
				@include flexWrap();
				.cell-icon{
					width: 56rpx;
					height: 56rpx;
					image{
						width:56rpx;
						height: 56rpx;
						margin: 0 auto;
					}
				}
				.cell-name{
					width: 100%;
					font-size:24rpx;
					text-align: center;
					margin-top: 16rpx;
				}
			}
		}
	}
</style>